import React, { Component } from 'react';
import { Form,Input,Spin,message,Upload,Button,Alert,Col,InputNumber,DatePicker,LocaleProvider,} from 'antd';
import { UploadOutlined ,CloseCircleOutlined} from '@ant-design/icons';
import { getToken } from '../../utils/cookies';
import './modal.css';
import zh_CN from 'antd/lib/locale-provider/zh_CN';  // 将日期选择器设置为中文
import moment from 'moment';
import 'moment/locale/zh-cn';  // 将日期选择器设置为中文
import {getWorkshop,getWells,setWells } from '../../utils/storageUtils';
import Axios from 'axios';

moment.locale('zh-cn');   // 将日期选择器设置为中文

class UploadDatafile extends Component { 

  constructor(props){
    super(props);
    this.state = {
      fileData1: [], //存放上传信息：比如路径、文件名
      fileData2: [], //存放上传信息：比如路径、文件名
      fileData3: [], //存放上传信息：比如路径、文件名
      percent:'',
      loading: false,
      event:undefined
    }
  };

  formRef = React.createRef();

  handleUpload = () => {
    const formData = new FormData();
    const {fileData1,fileData2,fileData3} = this.state;
      
   
    formData.append('file', fileData1);

    formData.append('video', fileData2);

    formData.append('srt', fileData3);
   
    console.log(fileData1,fileData2,fileData3)
      
    formData.append('drill_id', getWells().drill_id);
    formData.append('org_id', getWells().drill_org_id);
    formData.append('ws_id', getWells().drill_ws_id);
    
    if(fileData1.length === 0) {
      message.warning("请选择要上传的xml文件!");
    }
    else{
      this.setState({loading:true})
      Axios.defaults.baseURL='http://47.104.167.113:8081/data/management/document/upload'
      Axios({
          method: 'post',
          url: 'http://47.104.167.113:8081/data/management/document/upload',
          data: formData,
          headers: { "Content-Type": "multipart/form-data"}
      }).then(({data}) => {
        console.log("上传文件",data)
        if(data.code === 200){
          message.success("上传成功!");
          this.props.cancel();
        }else{
          message.error("上传失败!");
        }
        this.setState({loading:false})
      }).catch((err) =>{
        message.error("请求失败!");
      })
    }
    
  };
  remove_1 = () => {
    this.setState({
      fileData1:[]
    })
  }
  remove_2 = () => {
    this.setState({
      fileData2:[]
    })
  }
  remove_3 = () => {
    this.setState({
      fileData3:[]
    })
  }

  
  


  render(){
    const {fileData1,fileData2,fileData3} = this.state;
    const btn_style={border: 'none', backgroundColor:'fafafa'};
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
    };

    const config_1 = {
      beforeUpload: file => {
        this.setState({
          fileData1:file,
        })
        return false;
      },
      fileData1
    };

    const config_2 = {
      beforeUpload: file => {
        this.setState({
          fileData2:file,
        })
        return false;
      },
      fileData2
    };

    const config_3 = {
      beforeUpload: file => {
        this.setState({
          fileData3:file,
        })
        return false;
      },
      fileData3
    };
    
    return (
      <LocaleProvider locale={zh_CN}>
        <div className="upload-data-file">  
          <Spin tip="Loading..." spinning={this.state.loading}>
          <Form  
            {...layout}
            name="control-ref" 
          > 
            
            <Form.Item className="file-name1 user_btn" label="上传文件" rules={[{ required: true ,message:'请上传xml 文件'}]}>
                {/* {console.log("文件列表",fileData1)} */}
                <Input 
                  placeholder='支持 xml 格式文件'
                  value={fileData1.name ? fileData1.name : ''} 
                  style={{lineHeight: 34 , width: 335}}
                  addonAfter={
                    <>
                    <Upload 
                      {...config_1}
                      accept= ".xml"  // 接受上传的文件类型
                      className="upload-data"
                      showUploadList={false}
                      // withCredentials={true}
                    >
                      <Button icon={<UploadOutlined />} className='user_btn'></Button>
                    </Upload>
                    {
                      fileData1.name ? <Button icon={<CloseCircleOutlined />} onClick={this.remove_1} style={btn_style}></Button> : null
                    }
                    </>
                }
                />
            </Form.Item>

            <Form.Item className="file-name2 user_btn" label="上传视频文件" rules={[{ required: false }]}>
                <Input 
                  placeholder='支持 mp4 格式文件'
                  value={fileData2.name ? fileData2.name : ''} 
                  style={{lineHeight: 34 , width: 335}}
                  addonAfter={
                    <>
                    <Upload 
                      {...config_2}
                      accept= ".mp4"  // 接受上传的文件类型
                      className="upload-data"
                      showUploadList={false}
                    >
                      <Button icon={<UploadOutlined />} style={btn_style}></Button>
                    </Upload>
                    {
                      fileData2.name ? <Button icon={<CloseCircleOutlined />} onClick={this.remove_2} style={btn_style}></Button> : null
                    }
                    </>
                 } 
                />
            </Form.Item>

            <Form.Item className="file-name3 user_btn" label="上传字幕文件" rules={[{ required: false }]}>
                <Input 
                  placeholder='支持 srt 格式文件'
                  value={fileData3.name ? fileData3.name : ''} 
                  style={{lineHeight: 34 , width: 335}}
                  addonAfter={
                    <>
                    <Upload 
                      {...config_3}
                      accept= ".srt"  // 接受上传的文件类型
                      className="upload-data"
                      showUploadList={false}
                    >
                      <Button icon={<UploadOutlined />} style={btn_style}></Button>
                    </Upload>
                    {
                      fileData3.name ? <Button icon={<CloseCircleOutlined />} onClick={this.remove_3} style={btn_style}></Button> : null
                    }
                    </>
                 } 
                />
            </Form.Item>
        
            <Button
              type="primary"
              onClick={this.handleUpload}
              // disabled={fileData1.length === 0}
              // loading={uploading}
              style={{ marginTop:20,marginLeft:200}}
            >
              上传
            </Button>
          </Form> 
          </Spin> 
        </div>  
      </LocaleProvider>
    )
  }
}


export default UploadDatafile;